<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Chatbox Overlay</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="overlay-root" role="dialog" aria-modal="true" aria-labelledby="overlay-title">
      <div id="drag-bar">
        <div class="grip" aria-hidden="true"></div>
        <span class="title" id="overlay-title">助手</span>
        <div id="title-actions">
          <label id="model-label" class="sr-only" for="model-select">模型</label>
          <select id="model-select" aria-labelledby="model-label" title="选择模型"></select>
        </div>
        <button id="close-btn" aria-label="关闭" title="关闭">×</button>
      </div>
      <div id="topbar">
        <div id="tabs-row" class="h-scroll"><!-- 顶层分类将由桥接注入 --></div>
      </div>
      <!-- 二级选项紧贴一级选项下方 -->
      <div id="subcat-row" class="h-scroll"></div>
      <div id="input-row">
        <textarea id="input" rows="2" placeholder="输入或粘贴文本..."></textarea>
        <div class="btns">
          <button id="paste-btn" class="icon-btn i-paste" aria-label="粘贴" title="粘贴"></button>
          <button id="send-btn" class="icon-btn i-send primary" aria-label="发送" title="发送"></button>
        </div>
      </div>
      <div id="actions-row">
        <button id="shuffle-btn" class="icon-btn i-shuffle" aria-label="换一换" title="换一换"></button>
      </div>
      <div id="candidates"></div>
      <!-- SR-only live region for announcements -->
      <div id="sr-live" class="sr-only" aria-live="polite" aria-atomic="true"></div>
    </div>
    <script src="categories.js"></script>
    <script src="app.js"></script>
  </body>
</html>
